<template>
    <div id="scallop"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
    var chartDom = document.getElementById('scallop');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '菜品销售量',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 900, name: '主食类' },
                    { value: 735, name: '海鲜类' },
                    { value: 580, name: '肉蛋类' },
                    { value: 400, name: '蔬菜类' },
                    { value: 300, name: '豆奶类' }
                ]
            }
        ]
    };

    option && myChart.setOption(option);

    // 如果需要响应窗口大小的变化，可以添加以下监听器
    window.addEventListener('resize', function () {
        myChart.resize();
    });
});
</script>

<style>
body,
#app {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    margin: 0%;
    padding: 0%;
}

#scallop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    height: 95%;
    border-radius: 15px;
    border: 1px solid #aaa;
    box-shadow: 2px 1px 1px 3px #a5a5a5;
}
</style>